<template>
  <div class="device-transfer-container">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-neutral-800 dark:text-neutral-100">设备迁移</h1>
    </div>

    <!-- 用户信息卡片 -->
    <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-sm p-8 max-w-4xl mx-auto">
      <div class="grid grid-cols-2 gap-6">
        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            姓名
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            周宇轩
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            单位
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            jrlc
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            旧设备标识
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            xxxxxxxxx
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            新设备标识
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3">
            <el-input v-model="newDeviceId" placeholder="请输入新设备标识" clearable />
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            授权证书上传
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3">
            <el-upload
              class="upload-demo"
              :auto-upload="false"
              :on-change="handleFileChange"
              :show-file-list="true"
              :limit="1"
            >
              <el-button size="small" type="primary">
                <i class="fas fa-upload mr-2"></i>选择文件
              </el-button>
              <template #tip>
                <div class="text-xs text-neutral-500 mt-1">{{ fileName || 'xxx.lic' }}</div>
              </template>
            </el-upload>
          </div>
        </div>

        <div class="flex">
          <div class="w-40 bg-neutral-200 dark:bg-neutral-700 px-4 py-3 font-medium text-neutral-700 dark:text-neutral-300">
            授权到期时间
          </div>
          <div class="flex-1 border border-neutral-200 dark:border-neutral-600 px-4 py-3 text-neutral-800 dark:text-neutral-100">
            2025/10/30
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="flex gap-4 justify-center mt-8">
        <el-button type="primary" size="large" @click="submitTransfer" class="w-32">
          提交申请
        </el-button>
        <el-button size="large" @click="cancel" class="w-32">
          取消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const newDeviceId = ref('aaaaaaaa')
const fileName = ref('')

const handleFileChange = (file) => {
  fileName.value = file.name
}

const submitTransfer = () => {
  if (!newDeviceId.value) {
    ElMessage.warning('请输入新设备标识')
    return
  }
  ElMessage.success('设备迁移申请已提交')
  setTimeout(() => {
    router.push('/authorization/applications')
  }, 500)
}

const cancel = () => {
  router.back()
}
</script>

<style scoped>
.device-transfer-container {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

:deep(.el-upload) {
  width: 100%;
}
</style>

